<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>timeline</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/plugins/bootstrap/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/plugins/font-awesome/font-awesome.css}">
    <!-- ionicons -->
    <link th:href="@{/zhou/css/ionicons.min.css}" rel="stylesheet" />
    <!-- index -->
    <link th:href="@{/module/index/index.min.css}" rel="stylesheet" />
</head>

<body class="overflow-hidden">

<div class="main-container" style="margin-left: 5px;">
    <div class="padding-md">
        <h2 class="header-text">
            Timeline
            <span class="sub-header">
							19 Updates
						</span>
        </h2>

        <div class="row">
            <div class="col-md-10">
                <div class="timeline-wrapper clearfix">
                    <div class="timeline-year">
                        2014
                    </div>
                    <div class="timeline-row alt">
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fa fa-comment"></i>
                            </div><!-- ./timeline-icon -->
                            <div class="timeline-item-inner">
                                <div class="timeline-body">
                                    <div class="timeline-avatar">
                                        <img src="/blog/images/profile3.jpg" alt="" class="img-circle"/>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="font-16 font-semi-bold"><a href="#">Sarah Garcia</a> create a new blog</div>
                                        <small class="block text-muted m-bottom-xs">Yesterday, 07:24</small>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis. Sed quis ipsum risus. Mauris vitae justo non felis pulvinar rhoncus. In quis massa ut risus sagittis luctus.
                                    </div>
                                </div><!-- ./timeline-body -->
                            </div><!-- ./timeline-item-inner -->
                        </div><!-- ./timeline-item -->
                    </div><!-- ./timeline-row -->

                    <div class="timeline-row alt">
                        <div class="timeline-item">
                            <div class="timeline-icon bg-success">
                                <i class="fa fa-camera-retro"></i>
                            </div><!-- ./timeline-icon -->
                            <div class="timeline-item-inner">
                                <div class="timeline-body">
                                    <div class="timeline-avatar">
                                        <img src="/blog/images/profile9.jpg" alt="" class="img-circle"/>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="font-16 font-semi-bold m-bottom-xs"><a href="#">Christopher Brown</a> uploaded 3 photos</div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        <ul class="uploaded-photo-list m-top-sm clearfix">
                                            <li><a href="#"><img src="/blog/images/gallery4.jpg" alt=""/></a></li>
                                            <li><a href="#"><img src="/blog/images/gallery5.jpg" alt=""/></a></li>
                                            <li><a href="#"><img src="/blog/images/gallery6.jpg" alt=""/></a></li>
                                        </ul>
                                    </div>

                                    <div class="seperate-bar bg-grey font-12 m-top-md">
                                        <small class="inline-block m-right-sm"><i class="fa fa-comments"></i> 83 Comments</small>
                                        <small class="inline-block m-right-sm"><i class="fa fa-heart"></i> 122 Like</small>
                                        <small class="inline-block m-right-sm"><i class="fa fa-share"></i> 31 Shares</small>
                                    </div>

                                    <ul class="social-comment-list m-top-md">
                                        <li class="clearfix">
                                            <img src="/blog/images/profile7.jpg" alt=""/>
                                            <div class="comment-body">
                                                <p><a href="#" class="comment-name">Elizabeth Carter</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                                <small class="block text-muted m-bottom-xs">Yesterday, 08:02 <a href="#" class="m-left-sm m-right-sm">Like</a><a href="#" class="m-right-sm">Report</a></small>
                                            </div><!-- ./comment-list -->
                                        </li>
                                        <li class="clearfix">
                                            <img src="/blog/images/profile6.jpg" alt=""/>
                                            <div class="comment-body">
                                                <p><a href="#" class="comment-name">Christopher Brown</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.</p>
                                                <small class="block text-muted m-bottom-xs">Yesterday, 08:02 <a href="#" class="m-left-sm m-right-sm">Like</a><a href="#" class="m-right-sm">Report</a></small>
                                            </div><!-- ./comment-list -->
                                        </li>
                                    </ul>

                                    <div class="social-reply-section clearfix">
                                        <img src="/blog/images/profile1.jpg" alt=""/>
                                        <div class="input-wrapper">
                                            <input type="text" class="form-control" placeholder="Write a comment..."/>
                                            <div class="input-icon-link">
                                                <a href="#" class="text-normal"><i class="fa fa-camera fa-lg"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div><!-- ./timeline-body -->
                            </div><!-- ./timeline-item-inner -->
                        </div><!-- ./timeline-item -->
                    </div><!-- ./timeline-row -->

                    <div class="timeline-row alt">
                        <div class="timeline-item">
                            <div class="timeline-icon bg-success">
                                <i class="fa fa-briefcase"></i>
                            </div><!-- ./timeline-icon -->
                            <div class="timeline-item-inner">
                                <div class="timeline-body">
                                    <div class="font-16 font-semi-bold m-bottom-xs">
													<span class="fa-stack fa-lg">
												  		<i class="fa fa-circle fa-stack-2x text-purple"></i>
												  		<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
													</span>
                                        <span class="text-upper">Meeting with Business Partner</span>
                                    </div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis. Sed quis ipsum risus. Mauris vitae justo non felis pulvinar rhoncus. In quis massa ut risus sagittis luctus.</p>
                                </div><!-- ./timeline-body -->
                            </div><!-- ./timeline-item-inner -->
                        </div><!-- ./timeline-item -->
                    </div><!-- ./timeline-row -->

                    <div class="timeline-row clearfix alt">
                        <div class="timeline-item">
                            <div class="timeline-icon bg-info">
                                <i class="fa fa-pencil"></i>
                            </div><!-- ./timeline-icon -->
                            <div class="timeline-item-inner">
                                <div class="timeline-body">
                                    <div class="timeline-avatar">
                                        <img src="/blog/images/profile8.jpg" alt="" class="img-circle"/>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="font-semi-bold"><a href="#">John Doe</a> updated his status</div>
                                        <small class="block text-muted m-bottom-xs">27 July, 2014, 07:24</small>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis. Sed quis ipsum risus. Mauris vitae justo non felis pulvinar rhoncus. In quis massa ut risus sagittis luctus.
                                    </div>
                                </div><!-- ./timeline-body -->
                            </div><!-- ./timeline-item-inner -->
                        </div><!-- ./timeline-item -->
                    </div><!-- ./timeline-row -->

                    <div class="timeline-year bg-purple">
                        2013
                    </div>

                    <div class="timeline-row alt">
                        <div class="timeline-item">
                            <div class="timeline-icon">
                                <i class="fa fa-photo"></i>
                            </div><!-- ./timeline-icon -->
                            <div class="timeline-item-inner">
                                <div class="timeline-body">
                                    <div class="timeline-avatar">
                                        <img src="/blog/images/profile5.jpg" alt="" class="img-circle"/>
                                    </div>
                                    <div class="timeline-content">
                                        <div class="font-semi-bold"><a href="#">Karen Martin</a> updated his profile picture</div>
                                        <small class="block text-muted m-bottom-xs">16 Feb, 2013, 04:14</small>

                                        <img src="/blog/images/profile5.jpg" alt="" style="widht:100px; height:100px;"/>
                                    </div>
                                    <div class="seperate-bar bg-grey font-12 m-top-md">
                                        <small class="inline-block m-right-sm"><i class="fa fa-comments"></i> 83 Comments</small>
                                        <small class="inline-block m-right-sm"><i class="fa fa-heart"></i> 122 Like</small>
                                        <small class="inline-block m-right-sm"><i class="fa fa-share"></i> 31 Shares</small>
                                    </div>

                                    <ul class="social-comment-list m-top-md">
                                        <li class="clearfix">
                                            <img src="/blog/images/profile7.jpg" alt=""/>
                                            <div class="comment-body">
                                                <p><a href="#" class="comment-name">Sarah Garcia</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                                <small class="block text-muted m-bottom-xs">Yesterday, 08:02 <a href="#" class="m-left-sm m-right-sm">Like</a><a href="#" class="m-right-sm">Report</a></small>
                                            </div><!-- ./comment-list -->
                                        </li>
                                        <li class="clearfix">
                                            <img src="/blog/images/profile6.jpg" alt=""/>
                                            <div class="comment-body">
                                                <p><a href="#" class="comment-name">Jame Smith</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum auctor suscipit lobortis.</p>
                                                <small class="block text-muted m-bottom-xs">Yesterday, 08:02 <a href="#" class="m-left-sm m-right-sm">Like</a><a href="#" class="m-right-sm">Report</a></small>
                                            </div><!-- ./comment-list -->
                                        </li>
                                    </ul>

                                    <div class="social-reply-section clearfix">
                                        <img src="/blog/images/profile1.jpg" alt=""/>
                                        <div class="input-wrapper">
                                            <input type="text" class="form-control" placeholder="Write a comment..."/>
                                            <div class="input-icon-link">
                                                <a href="#" class="text-normal"><i class="fa fa-camera fa-lg"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div><!-- ./timeline-body -->
                            </div><!-- ./timeline-item-inner -->
                        </div><!-- ./timeline-item -->
                    </div><!-- ./timeline-row -->
                </div><!-- ./timeline-wrapper -->
            </div><!-- ./col -->
        </div><!-- ./row -->
    </div><!-- ./padding-md -->
</div><!-- /main-container -->

<a href="#" id="scroll-to-top" class="hidden-print"><i class="icon-chevron-up"></i></a>

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

</body>
</html>
